<template>
    <div>
   <!-- 布局容器 -->
   <el-container>
     <!-- 左侧菜单 -->
     <el-aside width="202px" style="background-color:#111A43;margin-left:20px;border:1px solid #60b6f1;" >
       <el-row class="tac">
         <!-- 导航菜单 -->
         <el-col>
           <el-menu :unique-opened="true"
            default-active="0"
             class="el-menu-vertical-demo"
             background-color="#111A43"
             text-color="#fff" 
             active-text-color="#0099FF">
             <el-submenu index="1">
               <template slot="title">
                 <span>集控器列表</span>
               </template>
               <el-menu-item v-for="(item, num) in conlists" :key="item.id" class="el-icon-s-data" :index="String(num)"
                 @click="readinfo(item.code,item.onlineStatus)">{{ item.name }}</el-menu-item>
             </el-submenu>
           </el-menu>
         </el-col>
       </el-row>
     </el-aside>
     <!-- 中间内容 -->
     <!-- style="background-color: #0a1237;height: 100vh;" -->
     <el-main style="background-color:#0b1339;border:1px solid #60b6f1" >
       <div class="mainbox">
        <div class="main-top">
            <ul class="rowlist" v-permission="'/button'">
          <li>
            <el-button
              size="small"
              v-permission="'/button'"
              type="primary"
              @click="open"
            >添加时控</el-button>
          </li>
          <!-- <li>
            <el-button
              size="small"
              v-permission="'/button'"
              type="primary"
             
            >功能二</el-button>
          </li>       -->
        </ul>
        </div>
        <!-- 数据部分 -->
        <div class="mainlist" style="background-color:#0b1339;border:1px solid #60b6f1">

        <el-table
          size="mini"
          :default-sort="{prop: 'date', order: 'descending'}"
          ref="multipleTable"
          :data="devlist"
          :header-cell-style="{'text-align':'center',background: '#111A43',color:'#fff'}"
          :cell-style="{'text-align':'center',background: '#111A43',color:'#fff'}"
          tooltip-effect="dark"
          style="width: 100%;background-color: #111A43;color:'#fff'"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>

          <el-table-column width="150" prop="cabinetCode" label="设备编号">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column prop="status" label="在线状态">
            <i
              slot-scope="scope"
              v-if="scope.row.status ==1"
              class="el-icon-success"
              style="color:lightgreen;font-size: 20px;"
            ></i>
            <i slot-scope="scope" v-else class="el-icon-error" style="color:#999;font-size: 20px;"></i>
          </el-table-column>

          <el-table-column label="开关">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.switchList" :key="index">
                <i
                
                  v-if="item.switchStatus ==true"
                  class="el-icon-s-opportunity"
                  style="color:lightgreen;font-size: 20px;"
                ></i>
                <i v-else class="el-icon-s-opportunity" style="color:#999;font-size: 20px;"></i>
              </span>
            </template>
          </el-table-column>

        </el-table>
        </div>
       </div>
       <!-- @refreshdev="refreshdev" -->
       <forms ref='forms' :obj="obj" :code="code" :centralizedCode="centralizedCode"></forms>
     </el-main>
   </el-container>
 </div>
</template>

<script>
import {
  getdevlists,
  getcontrollist,
} from "@/request/api";
import forms from "./components/form.vue";

export default { 
    components: {
    forms
  },
   data() {
       return {
        code:'',
        centralizedCode:'',
        multipleSelection: [], // 多选数据
        devlist:[],
        conlists:[],
        obj: {isshow: false},
        lamplist:[{num1:"000",num2:0,num3:0,num4:0}],
       };
   },
   mounted() {
     // 获取集控器列表
     this.getconlist();
   },
   methods: {

    //获取多选的数据
    handleSelectionChange(val) {
      this.multipleSelection = val; //存储选中的数据
      // console.log(val, "选中的数据");
    },
    // 点列表
    readinfo(num,online) {
      this.conline = online
      this.concode = num
      this.getdevlist(num)
      // this.getTime()
    },
    // 获取设备列表
    getdevlist(num) {
      // console.log(!num,'1');
      if (!num) {
        // console.log(this.conlists);
        num = this.conlists[0].code
      }else{
        num = this.concode 
      }
      // console.log(num);
      getdevlists({ "centralizedCode": num }).then(d => {
        if (d.code == '0000') {
            this.devlist = d.data
        }
      })
    },
    // 获取集控器列表
    getconlist() {
      getcontrollist().then(d => {
        if (d.code == '0000') {
          // console.log(d);
          this.conlists = d.data
          this.getdevlist()
          // this.getTime()
        }
      })
    },
    open() {
        this.$refs.forms.gettasklist(this.multipleSelection);
      // console.log(this.multipleSelection,'44');
        // this.devid = num
        this.obj.isshow = true;
        
      }

   },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
  border: none;
}
/* 列表 */
.mainlist{
    width: 100%;

}
.notonline {
  color: #333;
}

.online {
  color: greenyellow;
}

.main-top{
    width: 100%;
    margin-bottom:20px ;
    height: 80px;
    background: url('../../assets/image/maintop.png') #0b1339;
    background-repeat: no-repeat; 
    background-size: cover; 
}
/* 内容部分 */
.mainbox {
    background-color:#111A43;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* align-items: baseline; */
  justify-content: left;
}

/* 底部组件 */
/* 全部调光 */
.block {
  height: 40px;
  width: 300px;
  display: inline-block;
  margin-left: 30px;
  margin-top: 100px;
}

.footer div {
  margin-top: 20px;
  font-size: 14px;
}

/* 遮罩层 */

.mask {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
  /* 使用固定定位让元素撑满全屏 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.progress-2 {
  z-index: 2;
  position: absolute;
  left: 58vw;
  top: 40vh;
  width: 120px;
  height: 20px;
  border-radius: 20px;
  background: linear-gradient(skyblue 0 0) 0/0% no-repeat lightblue;
  animation: p2 2s infinite steps(10);
}

@keyframes p2 {
  100% {
    background-size: 110%;
  }
}

/* 加载中 */
.loading {
  position: absolute;
  left: 55vw;
  top: 40vh;
  width: 140px;
  height: 20px;
  z-index: 1;
  border: #999 solid 1px;
}

/* 进度条 */
.el-table .el-progress-bar .el-progress-bar__inner {
  border-radius: inherit !important;
}

/* 景区列表宽度 */
.el-row .el-col {
  width: 200px;
}

/* 按钮列表 */
.rowlist {
    padding-top:20px;
    padding-left: 20px;
    overflow: auto;
    display: flex;
    align-items: center;
}

.rowlist li {
  margin: 5px;
  width: 80px;
}

.rowlist el-input {
  width: 80px;
}

/* 导航栏宽度 */
.el-submenu .el-menu-item {
  width: 200px;
}

/* 移入变色 */
.el-submenu .el-menu-item:hover {
  background: skyblue !important;
  color: #fff !important;
}

/* 与主导航栏距离 */
.el-container {
  margin-left: -20px;
  padding: 0;
}

.el-aside {
  width: 209px;
  /* background-color: #fff; */
  text-align: left;
  height: calc(100vh - 130px);
  border-right: #999 solid 1px;
}

.el-main {
  height: calc(100vh - 130px);
  background: #0b1339;
  /* background-color: #fff; */
  color: #333;
}
</style>
